/**
 * 设置元素属性
 * @param el 要设置属性的元素
 * @param key 属性名
 * @param value 属性值
 */
export const setProp = (el: HTMLElement, key: string, value: any) => {
  if (key === 'class') {
    el.className = value;
  } else if (key === 'style') {
    // 内联样式
    Object.entries(value as Record<string, string>).forEach(([k, v]) => {
      // 检查是否是有效的样式值
      if (v !== null && v !== undefined && v !== '') {
        // 对于带有连字符的CSS属性名，使用setProperty方法
        el.style.setProperty(k, v);
      } else {
        // 如果值为空，移除该样式属性
        el.style.removeProperty(k);
      }
    });
  } else if (key.startsWith('on')) {
    // 事件监听
    const eventName = key.slice(2).toLowerCase();
    el.addEventListener(eventName, value);
  }
  // else if (key === 'id') { // 一般不处理
  //     el.id = value
  // }
  else {
    el.setAttribute(key, value);
  }
};
